<template>
    <div class="menu-search-container">
      <el-form ref="queryFormRef" :model="queryParamsModel" :inline="true">
        <el-form-item label="关键字" prop="keywords">
          <el-input
            v-model="queryParamsModel.keywords"
            placeholder="菜单名称"
            clearable
            @keyup.enter="handleQuery"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <template #icon>
              <ElSvgIcon a-icon-name="el-icon-edit" :aSize="15"/>
            </template>
            &nbsp;搜索
            </el-button
          >
          <el-button @click="resetQuery">
            <template #icon>
              <ElSvgIcon a-icon-name="el-icon-delete" :aSize="15"/>
            </template>
            &nbsp;重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
</template>
<script setup lang='ts'>
import { TypeMenuQueryI } from '@/api/menu/menu_types';
import { ElForm } from 'element-plus';
import { ref } from 'vue';
import {$bus} from '@/event_bus/event_bus_index'
import ElSvgIcon from '@/components/el-svg-icon/el_svg_icon_index.vue';

const queryFormRef = ref(ElForm);
const queryParamsModel = defineModel<TypeMenuQueryI>({ 
    required:true
});

function handleQuery(){
  console.log('in handleQuery');
  
  $bus.emit('menu-table-query');
}

function resetQuery(){
  queryFormRef.value?.resetFields();
  $bus.emit('menu-reset-and-query');
}
    ////#region defineXxx
    //defineOptions({
        //name:
    //});

    //const props=defineProps({
        //propA:{
            //type:String,
            //required:true
        //},
        //propB:{
            //type:Number,
            //default:1
        //},
        //propC:{
            //type:String as PropType<MyType>,
            //required:true
        //},
    //});

    //const emit = defineEmits<{
        //event1:[para1:number,para2:string],
        //event2:[para1:number,para2:string],
    //}>();
    ////#endregion
    
    
</script>
<style lang='scss' scoped>
    
</style>